<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
		<style type="text/css">
			* {margin:0;padding:0}
			body {width:960px;margin:30px auto;font-size:12px;color:#333}
			fieldset {border-radius:3px}
			legend {margin-left:30px;font-size:14px;}
			li {list-style:none}
			#f-inner {padding:20px}
			#f-inner>li {margin:10px 0;padding-bottom:10px;border-bottom:1px dashed #eee}
			#f-inner>li:last-child {border:none;padding-left:80px}
			div[contenteditable=true] {display:inline-block;font-size:12px;line-height:1.2;width:440px;border:1px solid #999;padding:4px;outline:none;cursor:text;vertical-align:top;}
			div[contenteditable=true]:focus{border-color:#393;line-height:1.2;}
			div[contenteditable=true]:before{content:'';}
			input[type=text],input[type=url] {width:440px}
			.t {display:inline-block;width:80px;text-align:right}
			#content-wrap {margin-left:68px;position:relative;display:none}
			#content-list>li {margin:8px 0;}
			#content-list>li .strong {font-weight:bold}
			#btns {position:absolute;bottom:0;left:464px;}
			#btns>span {display:inline-block;padding:6px;cursor:pointer;color:#999;-webkit-transition:.2s;}
			#btns>span:hover {color:#222;-webkit-transform:rotate(180deg);-webkit-transition:.2s;}
			#btns #close {display:none}
			#content-wrap input[type=text] {width:428px}
			textarea {width:442px;vertical-align:top}
			button {padding:6px 10px}
		</style>
	</head>
	<body>
		<form action="http://www.xxoo123.net/article" method="post">
            <input type="hidden" name="type" value="post_article">
            <input type="hidden" name="code" value="54ix6K+t56e75Yqo5byA5Y+R6ICFOjhhYWVlYWVkNDk0NmExZmQxZTBkYmY5MTNmZWUxMDI2">
			<fieldset>
				<legend>表单提交</legend>
				<ul id="f-inner">
					<li>
						<span class="t">标题：</span>
						<div contenteditable="true" for="title" data-need="1">&nbsp;</div>
						
					</li>
					<li>
						<span class="t">内容：</span>
						<div id="content-wrap">
							<ul id="content-list">
								<li>
									<input type="checkbox">
									<div contenteditable="true" class="content" data-need="1">&nbsp;</div>
								</li>
							</ul>
							<div id="btns">
								<span id="add" title="添加一行">+</span>
								<span id="close" title="删除该行">x</span>
							</div>
						</div>
					</li>
					<li>
						<span class="t">摘要：</span>
						<div contenteditable="true" for="summary" data-need="1">&nbsp;</div>
						
					</li>
					<li>
						<span class="t">图片地址：</span>
						<div contenteditable="true" for="img_url" data-need="1">&nbsp;</div>
						
					</li>
					<li>
						<span class="t">类型：</span>
						<select name="itype" id="itype">
							<option value="1">类型1</option>
							<option value="2">类型2</option>
							<option value="3">类型3</option>
							<option value="4">类型4</option>
							<option value="5">类型5</option>
							<option value="6">类型6</option>
						</select>
					</li>
					<li>
						<span class="t">标签：</span>
						<div contenteditable="true" for="tags-input" data-need="0">&nbsp;</div>						
					</li>
					<li>
						<input type="hidden" maxlength="13" id="title" name="title">
						<input type="hidden" maxlength="30" id="summary" name="summary">
						<input type="hidden" maxlength="99" id="img_url" name="img_url">
						<input type="hidden" id="tags-input" name="tags-input">
						<input type="hidden" name="tags" id="tags">
						<input type="hidden" name="content" id="content">
						<button type="submit">提交</button>
						<button type="reset">清空</button>
					</li>
				</ul>
			</fieldset>
		</form>
		<script type="text/javascript">
		(function(){
			var g = function(v){
				return typeof(v) == 'string' ? document.getElementById(v) : v;
			}

			/*内容行html*/
			var contentItem = document.querySelector('#content-list>li:last-child').cloneNode(true);
			g('content-wrap').style.display = 'block';

			/*初始化自动聚焦表单域*/
			document.querySelector('[contenteditable=true]').focus();

			var _showHideClose = function(){
				document.querySelectorAll('#content-list>li').length > 1 ?
					g('close').style.display = 'inline-block' :
					g('close').style.display = 'none';
			};

			/*添加内容行*/
			g('add').addEventListener('click', function(e){
				var itenAppend = g('content-list').appendChild(contentItem);
				contentItem = contentItem.cloneNode(true);
				_showHideClose();
			});
			/*删除内容行*/
			g('close').addEventListener('click', function(e){
				var lastContent = document.querySelector('#content-list>li:last-child');
				lastContent.parentNode.removeChild(lastContent);
				_showHideClose();
			});
			/*加粗处理*/
			document.addEventListener('change', function(e){
				var _cb = e.target;
				if(!g('content-list').contains(_cb) || _cb.getAttribute('type') != 'checkbox'){
					return;
				}
				var _content = _cb.parentNode.getElementsByClassName('content')[0];
				_content.classList[(_cb.checked ? 'add' : 'remove')]('strong');
			});

			/*表单提交*/
			var f = document.querySelector('form');
			f.addEventListener('submit', function(e){
				/*将自适用文本写入表单*/
				Array.prototype.forEach.call(document.querySelectorAll('[contenteditable=true]'), function(el){
					var value = el.innerText.replace(/^[\s\xa0\u3000]+|[\u3000\xa0\s]+$/g, "");
					el.dataset.value = value;
					if(el.getAttribute('for')){
						g(el.getAttribute('for')).value = value;
					}
				});
				/*必填字段检测*/
				var noEmptyEls = document.querySelectorAll('[data-need]');
				Array.prototype.forEach.call(noEmptyEls, function(i){
					if(!i.dataset.value){
						alert('有必填项未填写');
						/*
						var selector = '[contenteditable=true][for=' + i.getAttribute('id') + ']';
						document.querySelector(selector).focus();
						 */
						i.focus();
						i.style.borderColor = '#f00';
						e.preventDefault();
						throw 'inputs err';
					} else {
						i.style.borderColor = '#999';
					}
				});

				/*检查图片格式*/
                /*
                if(!(/\.(gif|png|jpg)$/.test(g('img_url').value))){
					alert('图片格式错误');
					var selector = '[contenteditable=true][for=' + g('img_url').getAttribute('id') + ']';
					document.querySelector(selector).focus();
					e.preventDefault();
                }
                */

				/*将内容转成json字符串格式*/
				var contentArr = [];
				Array.prototype.forEach.call(document.getElementsByClassName('content'), function(i){
					contentArr.push(i.classList.contains('strong') ? {strong: i.dataset.value} : {content : i.dataset.value});
				});
				g('content').value = JSON.stringify(contentArr);

				/*tags字段转换成json字符串格式*/
				/*g('tags').value = JSON.stringify(g('tags-input').value.split('|'));*/
			});
		})();
		</script>
	</body>
</html>
